<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="jakarta.faces.html"
  xmlns:ui="jakarta.faces.facelets"
  xmlns:f="jakarta.faces.core" xmlns:p="http://primefaces.org/ui">
<h:head>
  <title><ui:insert name="title">Title</ui:insert></title>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <h:outputStylesheet name="css/app.css" />

  <link rel="stylesheet"
    href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
</h:head>

<h:body>
  <div class="ui-g full-page">
    <!-- MENU -->
    <div class="ui-g-12 ui-md-2 side-panel">
      <div class="ui-g-12 menu-container">
        <h:graphicImage value="#{resource['/images/CTlogobadge128.png']}"
          class="side-panel-img" alt="Cargo Tracker logo badge" />
        <p:menu id="side-sub-menu" styleClass="sub-menu">
          <p:menuitem value="About"
            url="#{request.contextPath}/public/about.xhtml" />
          <p:menuitem value="Tracking"
            url="#{request.contextPath}/public/track.xhtml" />
        </p:menu>
      </div>
    </div>

    <!-- Main Section -->
    <div class="ui-g-12 ui-md-10 ui-g-nopad">
    <p:commandButton type="button" value="Home" styleClass="ui-button-flat" />
      <div class="ui-g-12 ui-g-nopad">
        <div class="ui-g">
          <ui:insert name="content">Default Content</ui:insert>
        </div>
      </div>
    </div>
  </div>
  <script>
			$('.side-panel-img').css('cursor', 'pointer');
			document.getElementsByClassName("side-panel-img")[0].onclick = function() {
				var target = window.location.origin + "/cargo-tracker";
				location.href = target;
			};

			document.getElementsByClassName("ui-button-flat")[0].onclick = function() {
				var target = window.location.origin + "/cargo-tracker";
				location.href = target;
			};
		</script>
</h:body>
</html>
